<template>
	<view class="flex_c_c page">
		<view class="flex_r fa_c fj_b top" :style="{top:$store.state.StatusBar.statusBar+'px'}">
			<view class="top-icon" @click="to()">
				<image class="img" src="" mode="aspectFill"></image>
			</view>
			<view class="top-icon">
			</view>
		</view>
		<view class="text_38 title">
			账号注册
		</view>
		<view class="form">
			<view class="flex_r form-row">
				<view class="text_34 form-row-title">
					+86
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.a" type="text" placeholder="请输入手机号">
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>
			<view class="flex_r form-row">
				<view class="text_34 form-row-title">
					验证码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.b" type="text" placeholder="请输入验证码">
				</view>
				<view class="form-row-code">
					获取验证码
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>

			<view class="flex_r form-row">
				<view class="text_34 form-row-title">
					密码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.c" type="text" placeholder="请输入密码">
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>
			<view class="flex_r form-row">
				<view class="text_34 form-row-title">
					邀请码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.d" type="text" placeholder="请输入邀请码">
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>

		</view>

		<view class="botton">
			<view class="size_white text_30 button" @click="submit">
				注册
			</view>
			<view class="icon_ agreement">
				<view class="icon_ checkbox" @click="change">
					<view class="checkbox-box" v-if="checked">
						<image class="img" src="" mode="aspectFill"></image>
					</view>
				</view>
				<view class="">
					同意用户协议<用户协议>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		show,
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				checked:false,
				formData: {
					a: '',
					b: '',
					c: '',
					d: ''
				}
			}
		},
		onLoad() {
		},
		methods: {
			to,
			change(e) {
				this.checked = !this.checked 
			},
			submit() {
				let formDataCheck = {
					a: '请输入a',
					b: '请输入b',
					c: '请输入c',
					d: '请输入d'
				};
				let data = {}
				for (const key in this.formData) {
					if (this.formData[key]) {
						data[key] = this.formData[key]
					} else {
						return show(`请填写${formDataCheck[key]}`);
						break;
					}
				}
				console.log(data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		box-sizing: border-box;
		padding: 0 50rpx;
		width: 100%;
		height: 100vh;
		margin: 0 auto;
	}

	.top {
		position: absolute;
		top: 0;
		left: 40rpx;
		width: 100%;
		height: 100rpx;
		.top-icon {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.title {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		margin-bottom: 20rpx;
	}

	.form {
		width: 100%;

		.form-row {
			position: relative;
			width: 100%;
			height: 100rpx;
			margin-bottom: 20rpx;

			.form-row-title {
				width: 170rpx;
				line-height: 100rpx;
			}

			.form-row-input {
				height: 100%;

				input {
					width: 100%;
					height: 100%;
				}
			}

			.form-row-code {
				box-sizing: border-box;
				padding-left: 10rpx;
				line-height: 100rpx;
				color: #e6166a;
			}

			.m-line {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				right: 0;
			}
		}
	}

	.botton {
		width: 100%;
		margin-top: 140rpx;
		margin-bottom: 100rpx;

		.button {
			width: 100%;
			height: 90rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 90rpx;
			background-color: #e6166a;
			margin-bottom: 20rpx;
		}

		.agreement {
			width: 100%;
			height: 50rpx;

			.checkbox {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				box-sizing: border-box;
				border: 1px solid #e6166a;
				margin-right: 20rpx;
				.checkbox-box {
					width: 40rpx;
					height: 40rpx;
					box-sizing: border-box;
				}
			}
		}

	}
</style>